<script setup>
	import { departmentListApi } from '@/services/consult.js'
	import { computed, ref } from 'vue'
	const props = defineProps({
		type: String,
		illnessType: String,
	})
	const tabIndex = ref(0)
	const departmentList = ref([])
	const childList = computed(() => departmentList.value[tabIndex.value]?.child)
	async function getDepartmentList() {
		// 科室列表接口
		const { code, data, message } = await departmentListApi()
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染列表数据
		departmentList.value = data
	}
	getDepartmentList()
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				class="department-item"
				v-for="(item, index) in departmentList"
				:key="item.id"
				:class="tabIndex === index ? 'active' : ''"
				@click="tabIndex = index"
			>
				{{ item.name }} </view
			><view class="department-item"></view>
		</scroll-view>
		<scroll-view scroll-y class="department-secondary">
			<navigator
				v-for="item in childList"
				class="department-item"
				:key="item.id"
				hover-class="none"
				:url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=${item.id}`"
			>
				{{ item.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	.department-page {
		display: flex;
		height: 100vh;
		.department-primary {
			background-color: #f6f6f6;
			width: 260rpx;
			padding: 20rpx 0;
			.department-item {
				line-height: 1.5;
				padding: 20rpx 40rpx;
				font-size: 28rpx;
				color: #6f6f6f;
				&.active {
					background-color: #fff;
					color: #2bd5a2;
				}
			}
		}
		.department-secondary {
			padding-top: 20rpx;
			.department-item {
				line-height: 1.5;
				padding: 20rpx 40rpx;
				font-size: 28rpx;
				color: #3c3e42;
			}
		}
	}
</style>
